import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { NzTagModule } from 'ng-zorro-antd/tag';
import { NzIconModule } from 'ng-zorro-antd/icon';
import {
  KeyOutline,
  SortAscendingOutline,
  LinkOutline,
  CloseOutline
} from '@ant-design/icons-angular/icons';
import { NzIconService } from 'ng-zorro-antd/icon';

@Component({
  selector: 'app-key-strategy-display',
  templateUrl: './key-strategy-display.component.html',
  styleUrls: ['./key-strategy-display.component.less'],
  standalone: true,
  imports: [NzTagModule, NzIconModule],
})
export class KeyStrategyDisplayComponent implements OnInit, OnChanges {
  @Input() keyStrategy: string = 'none';

  displayText: string = 'ID作为Key';
  tagType: string = 'blue';
  iconName: string = 'key';

  private strategyMap: Record<string, string> = {
    id: 'ID作为Key',
    index: '索引作为Key',
    key: '使用Key属性',
    none: '不使用Key'
  };

  private tagMap: Record<string, string> = {
    id: 'blue',
    index: 'green',
    key: 'red',
    none: 'default'
  };

  private iconMap: Record<string, string> = {
    id: 'key',
    index: 'sort-ascending',
    key: 'link',
    none: 'close'
  };

  constructor(private iconService: NzIconService) {
    this.iconService.addIcon(...[
      KeyOutline,
      SortAscendingOutline,
      LinkOutline,
      CloseOutline
    ]);
  }

  ngOnInit(): void {
    this.updateDisplay(this.keyStrategy);
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['keyStrategy'] && !changes['keyStrategy'].firstChange) {
      this.updateDisplay(changes['keyStrategy'].currentValue);
    }
  }

  private updateDisplay(strategy: string): void {
    this.displayText = this.strategyMap[strategy] || this.strategyMap['id'];
    this.tagType = this.tagMap[strategy] || 'blue';
    this.iconName = this.iconMap[strategy] || 'key';
  }
}
